<template>
    <v-container fluid>
        <v-data-iterator
                :items="desserts"
                :items-per-page.sync="itemsPerPage"
                single-expand
                hide-default-footer
        >
            <template v-slot:header>
                <v-toolbar class="mb-2" color="indigo darken-5" dark flat>
                    <v-toolbar-title>{{ title }}</v-toolbar-title>
                    <v-divider class="mx-4" inset vertical></v-divider>
                    <v-spacer></v-spacer>
                    <v-dialog v-model="dialog" max-width="500px">
                        <template v-slot:activator="{ on, attrs }">
                            <v-icon v-bind="attrs" v-on="on">mdi-database-plus</v-icon>
                        </template>
                        <v-card>
                            <v-card-title>
                                <span class="headline">{{ formTitle(title) }}</span>
                            </v-card-title>

                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <!-- 仿写下面的col -->
                                        <v-col cols="12" sm="6" md="4">
                                            <v-text-field
                                                    v-model="editedItem.name"
                                                    label="Name"
                                                    hint="设置字典英文名"
                                            ></v-text-field>
                                        </v-col>
                                        <v-col cols="12" sm="6" md="4">
                                            <v-text-field
                                                    v-model="editedItem.title"
                                                    label="Title"
                                                    hint="设置字典中文名"
                                            ></v-text-field>
                                        </v-col>
                                        <v-col cols="12" sm="6" md="4">
                                            <v-text-field
                                                    v-model="editedItem.desc"
                                                    label="Description"
                                                    hint="设置字典描述"
                                            ></v-text-field>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="error" text @click="close">Cancel</v-btn>
                                <v-btn color="success" text @click="save">Save</v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                </v-toolbar>
            </template>

            <template v-slot:default="{ items, isExpanded, expand }">
                <v-row>
                    <v-col
                            v-for="item in items"
                            :key="item.id"
                            cols="12"
                            sm="12"
                            md="12"
                            lg="12"
                    >
                        <v-card>
                            <v-card-title @click="expand(item, !isExpanded(item))" class="subheading font-weight-bold justify-space-between">
                                <div>
                                    <v-icon >
                                        {{isExpanded(item)?"mdi-chevron-up":"mdi-chevron-down"}}
                                    </v-icon>
                                    <span>{{item.title}} ({{item.name}})</span>
                                </div>
                                <v-icon v-if="isExpanded(item)" color="primary" @click.stop="newWord(item.id)">mdi-database-plus</v-icon>
                                <span v-if="!isExpanded(item)"><v-icon color="primary" class="mr-2"
                                                     @click.stop="editItem(item)">mdi-pencil</v-icon>
                                <v-icon color="warning" @click.stop="deleteItem(item)">mdi-delete</v-icon></span>


                            </v-card-title>

                            <v-divider></v-divider>

                            <v-list v-if="isExpanded(item)" dense>
                                <v-list-item class="justify-space-between">
                                    <v-list-item-content>Value</v-list-item-content>
                                    <v-list-item-content>Label</v-list-item-content>
                                    <v-list-item-content>Text</v-list-item-content>
                                    <v-list-item-content>Actions</v-list-item-content>
                                </v-list-item>
                                <v-divider></v-divider>
                                <v-list-item v-for="(word, index) in item.words" :key="index"
                                             class="justify-space-between">
                                    <v-list-item-content>{{word.value}}</v-list-item-content>
                                    <v-list-item-content>{{word.label}}</v-list-item-content>
                                    <v-list-item-content>{{ word.text }}</v-list-item-content>
                                    <v-list-item-content>
                                        <div>
                                            <v-icon color="primary" class="mr-2" @click="editWord(word)">mdi-pencil
                                            </v-icon>
                                            <v-icon color="warning" @click="deleteWord(word)">mdi-delete</v-icon>
                                        </div>

                                    </v-list-item-content>
                                </v-list-item>
                                <v-list-item v-if="item.words.length === 0" >
                                    <v-list-item-content class="justify-center" >No Data</v-list-item-content>
                                </v-list-item>
                            </v-list>
                        </v-card>
                    </v-col>
                </v-row>
            </template>

            <!--            <template v-slot:footer>-->
            <!--                <v-toolbar class="mt-2" color="indigo" dark flat>-->
            <!--                    <v-toolbar-title class="subheading">This is a footer</v-toolbar-title>-->
            <!--                </v-toolbar>-->
            <!--            </template>-->
        </v-data-iterator>
        <v-dialog v-model="wordDialog" max-width="500px">
            <v-card>
                <v-card-title>
                    <span class="headline">{{ formTitle("单词") }}</span>
                </v-card-title>

                <v-card-text>
                    <v-container>
                        <v-row>
                            <!-- 仿写下面的col -->
                            <v-col cols="12" sm="6" md="4">
                                <v-subheader class="pl-0 mb-6">设置一个value,要求整数且不能重复</v-subheader>
                                <v-slider
                                    v-model="editedWord.value"
                                    thumb-label="always"
                                    max="20"
                                    hint="设置一个value,要求整数"
                                >
                                    <template v-slot:prepend>
                                        <v-icon
                                                :color="color"
                                                @click="decrement"
                                        >
                                            mdi-minus
                                        </v-icon>
                                    </template>

                                    <template v-slot:append>
                                        <v-icon
                                                :color="color"
                                                @click="increment"
                                        >
                                            mdi-plus
                                        </v-icon>
                                    </template>
                                </v-slider>
                            </v-col>
                            <v-col cols="12" sm="6" md="4">
                                <v-text-field
                                        v-model="editedWord.label"
                                        label="Label"
                                        hint="设置Label, 英文字符串"
                                ></v-text-field>
                            </v-col>
                            <v-col cols="12" sm="6" md="4">
                                <v-text-field
                                        v-model="editedWord.text"
                                        label="Text"
                                        hint="设置Text,中文字符串"
                                ></v-text-field>
                            </v-col>
                            <v-col cols="12" sm="6" md="4">
                                <v-text-field
                                        v-model="editedWord.short"
                                        label="Short"
                                        hint="设置Short,中、英文缩写"
                                ></v-text-field>
                            </v-col>
                        </v-row>
                    </v-container>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="error" text @click="closeWord">Cancel</v-btn>
                    <v-btn color="success" text @click="saveWord">Save</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-container>
</template>

<script>
    import {GetListDict, CreateOneDict, UpdateOneDict, RemoveOneDict} from "@/api/dictionary";
    import {GetListWord, CreateOneWord, UpdateOneWord, RemoveOneWord} from "@/api/word";

    export default {
        data: () => ({
            title: "字典",
            itemsPerPage: 5,
            desserts: [],
            dialog: false,
            wordDialog: false,
            color: "primary",
            editedIndex: -1,
            editedItem: {
                name: "",
                title: "",
                desc: "",
            },
            defaultItem: {
                name: "",
                title: "",
                desc: "",
            },
            editedWord: {
                value: "",
                label: "",
                text: "",
                short: "",
                dictId: -1,
            },
            defaultWord: {
                value: "",
                label: "",
                text: "",
                short: "",
                dictId: -1,
            }
        }),
        computed: {

        },
        watch: {
            dialog(val) {
                val || this.close();
            },
        },
        created() {
            this.initialize();
            this.refresh();

        },
        methods: {
            initialize() {
                this.desserts.forEach(dict=>{

                })
            },
            refresh() {
                GetListDict().then(res => {
                    this.desserts = res.body
                })
            },
            formTitle(title) {
                return this.editedIndex === -1
                    ? "新建" + title
                    : "更新" + title;
            },
            editItem(item) {
                this.editedIndex = 0
                this.editedItem = Object.assign({}, item);
                this.dialog = true;
            },
            close() {
                this.dialog = false;
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem);
                    this.editedIndex = -1;
                });
            },

            //  下面两个方法需要增加相应的后台交互操作
            save() {
                if (this.editedIndex > -1) {
                    //   update
                    // Object.assign(this.desserts[this.editedIndex], this.editedItem);
                    UpdateOneDict(this.editedItem).then(res=>{
                        this.$msg.info(res.msg)
                        this.refresh()
                    })
                } else {
                    //   create
                    // this.desserts.push(this.editedItem);
                    CreateOneDict(this.editedItem).then(res=>{
                        this.$msg.info(res.msg)
                        this.refresh()
                    })
                }
                this.close();
            },
            deleteItem(item) {
                // const index = this.desserts.indexOf(item);
                confirm("确认删除?") &&
                // this.desserts.splice(index, 1);
                RemoveOneDict(item.id).then(res=>{
                    this.$msg.info(res.msg)
                    this.refresh()
                })
            },

            decrement () {
                if (this.editedWord.value>0) {
                    this.editedWord.value--
                }
            },
            increment () {
                this.editedWord.value++
            },

            newWord(dictId) {
                this.editedWord = Object.assign({}, this.defaultWord);
                this.editedWord.dictId = dictId
                this.wordDialog = true;
            },
            editWord(word) {
                this.editedIndex = 0;
                this.editedWord = Object.assign({}, word);
                this.wordDialog = true;
            },
            deleteWord(word) {
                confirm("确认删除?") &&
                // this.desserts.splice(index, 1);
                RemoveOneWord(word.id).then(res=>{
                    this.$msg.info(res.data.msg)
                    this.refresh()
                })
            },
            closeWord() {
                this.wordDialog = false;
                this.$nextTick(() => {
                    this.editedWord = Object.assign({}, this.defaultWord);
                    this.editedIndex = -1;
                });
            },
            saveWord() {
                if (this.editedIndex > -1) {
                    //   update
                    // Object.assign(this.desserts[this.editedIndex], this.editedItem);
                    UpdateOneWord(this.editedWord).then(res=>{
                        this.$msg.info(res.data.msg)
                        this.refresh()
                    })
                } else {
                    //   create
                    // this.desserts.push(this.editedWord);
                    CreateOneWord(this.editedWord).then(res=>{
                        this.$msg.info(res.data.msg)
                        this.refresh()
                    })
                }
                this.closeWord();
            }
        }

    }
</script>